﻿<template>
    <el-transfer v-model="currentValue"
                 :data="data"
                 :titles="myTitles"
                 :target-order="targetOrder"
                 :props="myProps"
                 @change="handlerChange"></el-transfer>
</template>

<script>
export default {
  name: 'form-transfer',
  data () {
    return {
      currentValue: this.myValue
    }
  },
  props: {
    value: {
      type: [Array, Number, String],
      default: []
    },
    targetOrder: String,
    data: Array,
    titles: Array,
    props: {
      type: Object,
      default () {
        return {
          label: 'label',
          key: 'value',
          disabled: 'disabled'
        }
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler (newVal) {
        console.log(newVal)
        this.currentValue = this.myValue
      }
    },
    currentValue (newVal) {
      this.$emit('input', newVal)
    }
  },
  computed: {
    // 自定义列表标题
    myTitles () {
      let titles = [].concat(this.titles)

      titles.forEach((title, index) => {
        titles[index] = this.$t(title)
      })

      return titles
    },
    // 数据源的字段别名
    myProps () {
      var props = this.props || {}
      return {
        label: props.label || 'label',
        key: props.key || 'value',
        disabled: props.disabled || 'disabled'
      }
    },
    // 选中数据
    myValue () {
      return this.value
    }
  },
  methods: {
    handlerChange (value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
      this.$emit('change', value, direction, movedKeys)
    }
  }
}
</script>
